<script setup>
import Header from "../components/Header.vue"
import {ref,  onMounted} from "vue"
const t = ref(0)

const name = ref('vue.js')

const input_content = ref('')
const check_content = ref('')

function greet(event){
  alert(`Hello ${name.value}`)
  if (event){
    alert(event.target.tagName)
  }
}

console.log('before mount')
console.log(document.getElementById('test'))

onMounted(()=>{
  console.log('on mount')
  console.log(document.getElementById('test'))
})

</script>

<template>
  
  <div class="about">
    <Header :msg="t"></Header>

    <button @click="greet">add 1</button>
    <br>
    <input v-model="input_content">
    <br>
    <p id="test">{{ input_content }}</p>

    <input type="checkbox" > <span>test</span>

    <p>   {{ check_content }}</p>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
